<template>
  <div>
    <v-app>
      <v-navigation-drawer
        app
        dark
        fixed
        bottom
        v-model="drawer">
        <v-list-item>
          <v-list-item-content>
            <v-list-item-title class="text-h6 mt-2">
              <router-link  to="/" class="white--text text-decoration-none ">
                {{app_name}}
              </router-link>
            </v-list-item-title>
          </v-list-item-content>
        </v-list-item>


        <v-list>
          <template v-for="item in user.menu">
            <v-list-group
              v-if=" item.children &&  item.children.length > 0"
              :key="item.id"
              active-class="white--text"
              :group="item.children.flatMap(e => '^' + e.uri).join('|')"
            >
              <template v-slot:activator>
                <v-list-item-content>
                  <v-list-item-title v-text="item.title"></v-list-item-title>
                </v-list-item-content>
              </template>

              <template v-slot:prependIcon>
                <v-icon>{{ item.icon ? item.icon : "mdi-folder"}}</v-icon>
              </template>


              <v-list-item
                v-for="item in item.children"
                :key="item.id"
                link
                :to="item.uri"
                active-class="white--text"
              >
                <v-list-item-icon>

                </v-list-item-icon>
                <v-list-item-content>
                  <v-list-item-title>{{ item.title }}</v-list-item-title>
                </v-list-item-content>
              </v-list-item>
            </v-list-group>

            <v-list-item
              v-else
              :key="item.id"
              link
              :to="item.uri"
              active-class="white--text"
            >
              <v-list-item-icon>
                <v-badge
                  color="red"
                  dot
                  left
                  v-if="item.uri == '/chat'"
                  :value="chat_msg_new"
                >
                   <v-icon>{{ item.icon ? item.icon : "mdi-folder"}}</v-icon>
                </v-badge>
                <v-icon v-else>{{ item.icon ? item.icon : "mdi-folder"}}</v-icon>
              </v-list-item-icon>
              <v-list-item-content>
                <v-list-item-title>{{ item.title }}</v-list-item-title>
              </v-list-item-content>
            </v-list-item>

          </template>
        </v-list>
      </v-navigation-drawer>

      <v-app-bar app dense elevation="3">
          <v-progress-linear
              absolute
              top
              :active="requesting"
              :indeterminate="requesting"
              height="2"
          ></v-progress-linear>


         <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>

        <v-tooltip bottom>
          <template v-slot:activator="{ on, attrs }">
            <v-btn icon
              @click="$router.go(-1)"
              :disabled="!historyLength"
              v-bind="attrs"
              v-on="on">
                <v-icon>mdi-arrow-left</v-icon>
            </v-btn>
          </template>
          <span>后退</span>
        </v-tooltip>
        <v-tooltip bottom>
          <template v-slot:activator="{ on, attrs }">
            <v-btn icon
              @click="$router.go(1)"
              v-bind="attrs"
              v-on="on">
                <v-icon>mdi-arrow-right</v-icon>
            </v-btn>
          </template>
          <span>前进</span>
        </v-tooltip>
         <v-spacer></v-spacer>
          {{user.name ? user.name : user.mobile}}

         <v-menu offset-y :close-on-content-click="false" >
           <template v-slot:activator="{ on, attrs }">
            <v-btn
              icon
              v-bind="attrs"
              v-on="on"
            >
              <v-icon>mdi-dots-vertical</v-icon>
            </v-btn>
           </template>

          <v-list>
            <v-list-item>
              <v-list-item-title>
                <v-dialog
                  v-model="dialog"
                  persistent
                  max-width="400px"
                >
                <template v-slot:activator="{ on, attrs }">
                    <v-btn text  v-bind="attrs"  v-on="on">
                      <v-icon>mdi-key</v-icon>修改密码
                    </v-btn>
                  </template>
                  <v-form ref="form"  @keyup.native.enter="doLogin">
                    <v-card>
                      <v-card-title>
                        <span class="text-h5">修改密码</span>
                      </v-card-title>
                      <v-card-text>

                        <v-row>
                          <v-col cols="12">
                            <v-text-field
                              label="新密码"
                              v-model="password"
                              :rules="[rules.required, rules.size]"
                            ></v-text-field>
                          </v-col>
                          <v-col cols="12" >
                            <v-text-field
                              label="再次输入新密码"
                              v-model="re_password"
                              :rules="[rules.required, rules.size, passwordConfirmationRule]"
                            ></v-text-field>
                          </v-col>
                        </v-row>

                      </v-card-text>
                      <v-card-actions>
                        <v-spacer></v-spacer>
                        <v-btn  depressed   @click="dialog = false" :disabled="reseting">
                          关闭
                        </v-btn>
                        <v-btn   depressed  color="blue darken-1" dark  @click="resetPassword()" :loading="reseting">
                          确定
                        </v-btn>
                      </v-card-actions>
                    </v-card>
                  </v-form>
                </v-dialog>
              </v-list-item-title>
            </v-list-item>
            <v-list-item>
                <v-list-item-title>
                  <v-btn text :loading="loading"  @click="logout()">
                    <v-icon>mdi-exit-to-app</v-icon>退出
                  </v-btn>
                </v-list-item-title>
            </v-list-item>
          </v-list>
        </v-menu>
      </v-app-bar>

      <!-- Sizes your content based upon application components -->
      <v-main>
        <!-- Provides the application the proper gutter -->
        <v-container fluid>
          <!-- If using vue-router -->
          <router-view></router-view>
        </v-container>
      </v-main>
    </v-app>
 </div>
</template>

<script>
import { mapGetters } from 'vuex';
import axios from "axios";

export default {
  data () {
    return {
      app_name: '',
      loading: false,
      reseting: false,
      drawer: true,
      dialog: false,
      password: '',
      re_password: '',
      rules: {
        required: value => !!value || '必填',
        size: v => (v && v.length >= 6) || '最少6个字符',
      },
    }
  },
  computed: {
     passwordConfirmationRule() {
        return () => (this.password === this.re_password) || '两次密码不一致'
    },
    historyLength() {
      return window.history.length;
    },
    ...mapGetters([
      'user',
      'requesting',
      'chat_msg_new'
    ]),
  },
  created() {
      this.loadQr()
  },
  methods: {
      loadQr() {
          axios.get(`/v1/home`).then((response) => {
              this.app_name = response.data.data.app_name;
          })
      },
    logout() {
        const that = this;
        that.loading = true;
        axios.post("/logout", {}).then((response) => {
            that.$store.dispatch("token", null);
            that.$store.dispatch("user", null);
            that.$router.push({ path: `/login` });
        }).catch(function () {})
        .then(function () {
            that.loading = false;
        });
    },

    resetPassword() {
      if (!this.$refs.form.validate()) {
          return;
      }

      const that = this;
      that.reseting = true;
      axios.post("/reset-password", {
          re_password: this.re_password,
          password: this.password,
      }).then((response) => {
        if (response.data.code == 0) {
          this.dialog = false;
          this.password = '';
          this.re_password = '';
          this.$toast.open({
              message: response.data.msg,
              type: 'success',
              position: 'top-right',
          });
        } else {
          this.$toast.open({
              message: response.data.msg,
              type: 'error',
              position: 'top-right',
          });
        }
      }).catch(function () {})
      .then(function () {
         that.reseting = false;
      });
    }
  }
}
</script>
